<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="icon" v-for="item of  page" :key="item.id">
          <div class="icon-image">
            <img class="icon-image-content" :src='item.imgurl'/>
            <p class="icons-text">{{item.name}}</p>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  export default {
    name: "Icons",
    data() {
      return {
        swiperOption: {
          loop: false//是否可以循环
        },
        iconlist: [
          {
            id: '01',
            imgurl: '//s.qunarzz.com/homenode/images/touchheader/group.png',
            name: '特惠酒店'
          }, {
            id: '02',
            imgurl: '//s.qunarzz.com/homenode/images/touchheader/bargainflight.png',
            name: '低价机票'
          },
          {
            id: '03',
            imgurl: '//s.qunarzz.com/homenode/images/touchheader/inn.png',
            name: '客栈'
          },
          {
            id: '04',
            imgurl: '//s.qunarzz.com/homenode/images/touchheader/haiwai.png',
            name: '海外酒店'
          },
          {
            id: '05',
            imgurl: '//s.qunarzz.com/homenode/images/touchheader/package.png',
            name: '度假'
          },
          {
            id: '06',
            imgurl: '//s.qunarzz.com/homenode/images/touchheader/hotel.png',
            name: '酒店'
          },
          {
            id: '07',
            imgurl: '//s.qunarzz.com/homenode/images/touchheader/flight.png',
            name: '机票'
          },
          {
            id: '08',
            imgurl: '//s.qunarzz.com/homenode/images/touchheader/train.png',
            name: '火车票'
          },
          {
            id: '09',
            imgurl: '//s.qunarzz.com/homenode/images/touchheader/kezhan.png',
            name: '民宿'
          }]
      }
    },
    computed:{
      pages(){
        const  pages=[]
        this.iconlist.forEach((item,index)=>{
          const  page=Math.floor(index/8)
          if (!pages[page]){
            pages[page]=[]
          }
          pages[page].push(item)
        })
        return pages;
      }
    }
  }

</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  .icons >>> .swiper-container
    height: 0
    padding-bottom 48%
    .icon
      position: relative
      overflow hidden
      float left
      width 25%
      padding-bottom 25%
      .icon-image
        width 100%
        top 0
        left 0
        right 0
        bottom .44rem
        box-sizing border-box
        padding .1rem
        position absolute
        .icon-image-content
          height 80%
          display block
          margin 0 auto
      .icons-text
        left: 0
        right: 0
        bottom: 0
        height .33rem
        text-align center
        margin-top .2rem
        line-height .33rem
        color $iconName


</style>
